<template>
  <div class="dialog-mask" v-if="visible" @click.self="close">
    <div class="dialog-container inspection-dialog">
      <div class="dialog-header">
        <h2>{{ currentTask.taskName }}</h2>
        <button class="close-btn" @click="close">×</button>
      </div>

      <div class="dialog-body">
        <!-- 任务信息 -->
        <div class="task-meta">
          <div class="meta-item">
            <label>状态：</label>
            <span :class="statusClass">{{ currentTask.status }}</span>
          </div>
          <div class="meta-item">
            <label>负责人：</label>
            <span>{{ currentTask.assignee }}</span>
          </div>
          <div class="meta-item">
            <label>截止日期：</label>
            <span>{{ currentTask.dueDate }}</span>
          </div>
        </div>

        <!-- 巡检记录 -->
        <section class="section">
          <h3>巡检记录</h3>
          <record-form @submit="handleAddRecord" />
          <record-list :records="currentTask.records" />
        </section>

        <!-- 问题上报 -->
        <section class="section">
          <h3>问题上报</h3>
          <issue-form @submit="handleReportIssue" />
          <issue-list :issues="currentTask.issues" />
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useProjectStore } from '@/stores/project'
import RecordForm from './RecordForm.vue'
import IssueForm from './IssueForm.vue'
import RecordList from './RecordList.vue'
import IssueList from './IssueList.vue'

export default {
  components: { RecordForm, IssueForm, RecordList, IssueList },
  props: {
    visible: Boolean,
    taskId: Number
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    const store = useProjectStore()

    const currentTask = computed(() =>
      store.inspections.find((i) => i.id === props.taskId)
    )

    const statusClass = computed(() => ({
      'status-active': currentTask.value.status === '进行中',
      'status-completed': currentTask.value.status === '已完成'
    }))

    const close = () => emit('update:visible', false)

    const handleAddRecord = (record) => {
      store.addInspectionRecord(props.taskId, record)
    }

    const handleReportIssue = (issue) => {
      store.reportIssue(props.taskId, issue)
    }

    return {
      currentTask,
      statusClass,
      close,
      handleAddRecord,
      handleReportIssue
    }
  }
}
</script>

<style scoped>
.inspection-dialog {
  max-width: 800px;
}

.task-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.meta-item {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
}

.section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>
